<template>
  <div
    class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-7 py-2 gap-4 md:gap-2 gva-container2"
  >
    <gva-card
      title="快捷功能"
      show-action
      custom-class="col-start-1 md:col-start-3 lg:col-start-7 row-span-2 h-38"
    >
      <gva-quick-link />
    </gva-card>
    <!-- ${layoutList['温度']}` -->
    <gva-card
      v-if="temperature"
      title="温度(°C)"
      :custom-class="`col-span-1 md:col-span-1 row-start-1 lg:col-span-6 col-start-1 row-span-2`"
    >
      <gva-chart :type="4" :deviceSataSet="devideData['temperature']" :timeDataSet="devideDateTime" />
    </gva-card>
    <gva-card
      v-if="COConcentration"
      title="CO浓度(%)"
      :custom-class="`col-span-4 md:col-span-4 row-start-${layoutList['CO浓度']} lg:col-span-6 col-start-1 row-span-2`"
    >
      <gva-chart :type="4" :deviceSataSet="devideData['COConcentration']" :timeDataSet="devideDateTime" />
    </gva-card>
    <gva-card
      v-if="smokeIndex"
      title="烟雾指数(ppm)"
      :custom-class="`col-span-4 md:col-span-4 row-start-${layoutList['烟雾指数']} lg:col-span-6 col-start-1 row-span-2`"
    >
      <gva-chart :type="4" :deviceSataSet="devideData['smokeIndex']" :timeDataSet="devideDateTime" />
    </gva-card>
    <gva-card
      v-if="InfraredThermometry"
      title="红外测温"
      :custom-class="`col-span-4 md:col-span-4 row-start-${layoutList['红外测温']} lg:col-span-6 col-start-1 row-span-2`"
    >
      <gva-chart :type="4" :deviceSataSet="devideData['InfraredThermometry']" :timeDataSet="devideDateTime" />
    </gva-card>
    <gva-card
      title="文档"
      show-action
      custom-class="md:row-start-8 md:col-start-3 lg:row-start-3 lg:col-start-7"
    >
      <gva-wiki />
    </gva-card>

    <gva-card
      title="最新更新"
      :custom-class="`col-span-1 row-start-${layoutList['底部动态']} md:col-span-3 row-span-2`"
    >
      <gva-table />
    </gva-card>
    <gva-card
      title="最新插件"
      :custom-class="`col-span-1 row-start-${layoutList['底部动态']} md:col-span-3 row-span-2`"
    >
      <gva-plugin-table />
    </gva-card>

    <gva-card
      title="公告"
      show-action
      custom-class="row-start-4 col-span-1 lg:col-start-7"
    >
      <gva-notice />
    </gva-card>

    <gva-card
      without-padding
      custom-class="row-start-6 overflow-hidden lg:h-40 col-span-1 md:col-start-2 md:col-span-1 lg:col-start-7"
    >
      <gva-banner />
    </gva-card>
  </div>
</template>

<script setup>
  import {
    GvaPluginTable,
    GvaTable,
    GvaChart,
    GvaWiki,
    GvaNotice,
    GvaQuickLink,
    GvaCard,
    GvaBanner
  } from './components'
  import { getSysConfigList } from '@/api/system/sysConfig'
  import { ref, onMounted,reactive } from 'vue'
  import { getDeviceDataListLatest } from '@/api/device/deviceData'

  const layoutList = ref({
    '温度':1,
    'CO浓度':0,
    '烟雾指数':0,
    '红外测温':0,
    '底部动态':0
  })

  onMounted(() => {
    getSysConfigData()
    getDeviceDataData()
    console.log('Component has been mounted.')
  })

  defineOptions({
    name: 'Dashboard'
  })



  const searchInfo = ref({})

  //布局数组
  // const layoutList = reactive({
  //   temperature: 0,
  //   COConcentration: 0,
  //   smokeIndex: 0,
  //   InfraredThermometry: 0
  // })

  const layoutArr = [1,3,6,9,12]
  // 温度
  const temperature = ref(true)
  //CO浓度
  const COConcentration = ref(true)
  //烟雾指数
  const smokeIndex = ref(true)
  //红外测温
  const InfraredThermometry = ref(true)
 
  // 查询
  const getSysConfigData = async () => {
    const table = await getSysConfigList({
      page: 1,
      pageSize: 10,
      ...searchInfo.value
    })
    if (table.code === 0) {
      // tableData.value = table.data.list
      console.log(table.data.list)
      //计数器
      let count = 0
      table.data.list.forEach((item, index) => {
        console.log(index, item.configValue, item.configKey)
        if (item.configKey == '温度') {
          if (item.configValue == 0) {
            temperature.value = false
          }else{
            
            layoutList.value['温度'] = layoutArr[count]
            count++
          }
        }
        if (item.configKey == 'CO浓度') {
          if (item.configValue == 0) {
            COConcentration.value = false
          }else{
            layoutList.value['CO浓度'] = layoutArr[count]
            count++
          }
        }
        if (item.configKey == '烟雾指数') {
          if (item.configValue == 0) {
            smokeIndex.value = false
          }else{
            layoutList.value['烟雾指数'] = layoutArr[count]
            count++
          }
        }
        if (item.configKey == '红外测温') {
          if (item.configValue == 0) {
            InfraredThermometry.value = false
          }else{
            layoutList.value['红外测温'] = layoutArr[count]
            count++
          }
        }
      })
      layoutList.value['底部动态'] = layoutArr[count]
      console.log(layoutList.value)
    }
  }


  const devideData = reactive({
    temperature: [],
    COConcentration: [],
    smokeIndex: [],
    InfraredThermometry: []
  })
  const devideDateTime = ref([])
  // 查询
  const getDeviceDataData = async () => {
    const table = await getDeviceDataListLatest({
      dataCount: 8,
    })
    if (table.code === 0) {
      table.data.list.forEach((item, index) => {
        devideData['temperature'].push(item.temperature)
        devideData['COConcentration'].push(item.coConcentration)
        devideData['smokeIndex'].push(item.smokeIndex)
        devideData['InfraredThermometry'].push(item.infraredTemperature)
        devideDateTime.value.push(item.CreatedAt.slice(0,10))
      })
    }
  }

  
</script>

<style lang="scss" scoped></style>
